<template>
	<view class="root">
		<view class="header">
			<image class="avatar" src="../../../static/wx-add-qr-code/add-qr-code.png" mode=""></image>
			<view class="text">
				上门回收
			</view>
		</view>
		<view class="mid">
			<view class="text1">
				该小程序申请获取以下权限
			</view>
			<view class="text2">
				获得您的公开信息（微信昵称、头像、手机号等）
			</view>
		</view>
		<view class="bottom">
			<button 
				class="login-button" 
				open-type="getPhoneNumber" 
				@click="openAgreeLoginPopup"
				@getphonenumber="getPhone"
				>
					授权登录
			</button>
			<agree-login-popup ref="loginPopup"></agree-login-popup>
		</view>
		
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import {onLoad} from '@dcloudio/uni-app';
	const loginPopup = ref()
	const phone = ref('12345678910')
	
	const getPhone = (res) => {
		
		//	通过res参数可以获取到code换取手机号的临时凭证、encryptedData(加密数据、包含手机号)、iv(加密算法初始向量)
		
	}
	
	const openAgreeLoginPopup = () => {
		loginPopup.value.openPopup()
	}
	
	onLoad(() => {
		
	}) 
	
</script>

<style lang="scss">
	.root {
		display: flex;
		flex-direction: column;
		gap: 50rpx;
		padding: 50rpx;
		.header {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 20rpx;
			.avatar {
				width: 200rpx;
				height: 200rpx;
			}
			.text {
				font-size: 34rpx;
				font-weight: 700;
			}
		}
		.mid {
			height: 150rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 40rpx;
			font-size: 28rpx;
			color: rgba(134,134,134,1);
			.text1 {
				
			}
			.text2 {
				
			}
		}
		.bottom {
			padding-top: 100rpx;
			.login-button {
				background-color: #2ec076;
				color: white;
				border-radius: 50rpx;
			}
		}
	}
</style>
